<template>
	<view class="wish-view">
		<view class="search-view">
			<u-search :showAction="false" :placeholder="$t('searchResult.search')" @click="goSearch" :disabled="true"
				height="37">
			</u-search>
		</view>

		<view class="swiper-view">
			<u-swiper :list="swiperImgArray" @change="e => current = e.current" @click="swiperClick" :autoplay="true"
				radius="0" height="232rpx" circular>
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in swiperImgArray" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>

		<view class="goods-list" v-if="wishGoodsList">
			<waterfallsFlow imageSrcKey="seriesOne" :list="wishGoodsList">
				<template v-slot:default="item">
					<GoodsItem :isNoImg="true" :isWish="true" :goodsItem="item">
					</GoodsItem>
				</template>
			 </waterfallsFlow >
		</view>

		<view class="publish-wish" @tap="goPublishWish">
			{{$t("wishGoods.publish")}}
		</view>
	</view>
</template>

<script>
	import {
		getMyWish,
		getSwiper
	} from "@/common/api.js"
	import GoodsItem from '@/components/GoodsItem/GoodsItem'
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";

	export default {
		data() {
			return {
				swiperImgArray: [],
				current: 0,
				wishGoodsList: null,
				swiperArray: []
			}
		},
		components: {
			GoodsItem,
			waterfallsFlow
		},
		methods: {
			goPublishWish() {
				uni.navigateTo({
					url: "/pages/wishList/wishList"
				})
			},
			// 轮播图点击事件
			swiperClick(index) {
				console.log(this.swiperArray[index]);
				console.log("swiperClick():", index);
				if (this.swiperArray[index].goodsId) {
					uni.navigateTo({
						url: `/pages/commodityDetails/commodityDetails?id=${this.swiperArray[index].goodsId}`
					})
				}
			
				if (this.swiperArray[index].newsId) {
					uni.navigateTo({
						url: `/pages/newsDetails/newsDetails?id=${this.swiperArray[index].newsId}`
					})
				}
			},
			scrolltolower() {
				console.log("到达底部");
			},
			goSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			//轮播图获取
			async getSwiperImg() {
				this.swiperImgArray = []
				const res = await getSwiper({
					parentId: 1
				});
				if (res.code == 200) {
					this.swiperImgArray = [];
					this.swiperArray = res.rows;
					res.rows.forEach(e => {
						this.swiperImgArray.push(e.url)
					})
				}
			},
			async initWishGoodsList() {
				const {
					rows
				} = await getMyWish({
					pageSize: 1000
				});
				console.log(rows);
				
				this.wishGoodsList = rows;
			}
		},
		onShow() {
			this.wishGoodsList = null;
			this.initWishGoodsList();
			this.getSwiperImg();
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("wishGoods.title")
			});
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	.u-list {
		padding-bottom: 112rpx;
	}

	.search-view {
		padding: 14rpx 22rpx;
		background-color: #fff;
	}

	// 轮播图区域
	.swiper-view {
		margin: 0 24rpx;
		margin-top: 14rpx;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.goods-list {
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		// flex-wrap: wrap;
		// height: 3000rpx;
		padding: 24rpx 40rpx;
		box-sizing: border-box;
		padding-bottom: 150rpx;
	}

	.publish-wish {
		height: 90rpx;
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		background-color: #000;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: bold;
		border-radius: 20rpx 20rpx 0 0;
		background: #000000;
		font-size: 36rpx;
		line-height: 90rpx;
		text-align: center;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
